<template>
<div>
    {{someValue}}
    <input :type="type" :value="inputValue" @input="inputHandler">
</div>
</template>

<script>
    export default {
        inject: ['someValue'],
        props: {
            value:{
                type:String,
                default:''
            },
            type:{
                type:String,
                default:'text' //默认值为文本框
            }
        },
        data() {
            return {// 单向数据流原则：组件内不能修改props属性
            //重新赋一个新值
                inputValue: this.value
            }
        },
        methods: {
            inputHandler(e) {
                this.inputValue = e.target.value;
                // 通知父组件值更新
                this.$emit('input', this.inputValue)

                // 通知FormItem做校验
                // this.$parent 拿到父类formItem，自己传自己，formItem来监听
                this.$parent.$emit('validate', this.inputValue)
            }
        },
    }
</script>

<style scoped>

</style>